<template>
	<view class="wrap">
		<scroll-view class="menu-scroll"
			scroll-y="true"
			enable-flex>

			<view class="wt-item" v-for="(item, index) in itemList" 
			:key="item._id"
			 :id="item._id"
			@tap="toMenuDetail">
				<image :src="item.coverpic"></image>

				<view class="right">
					<text class="menu-title">{{item.name}}</text>
					<text class="menu-desc">{{item.classtips}}</text>
					<view class="item-row">
						<view class="row-item">
							<text>{{item.pageview | valueFilter }}</text>
							<image src="../../static/img/caipusousuo_slices/mengbanzu278.png"
								mode=""></image>
						</view>
						<view class="row-item">
							<text>{{item.collections | valueFilter}}</text>
							<image src="../../static/img/home/favorite.png"
								mode=""></image>
						</view>
					</view>
				</view>

			</view>

	
		</scroll-view>
	</view>


</template>

<script>
	export default {
		name: "menu-scroll",
		props: {
			itemList: {
				type: Array
			},
		},
		data() {
			return {

			};
		},
		methods:{
			toMenuDetail(e) {
				// console.log(this.isVip);
					uni.navigateTo({
						url: '/pages/menu-detail/menu-detail?id=' + e.currentTarget.id
					})
				
			},
		}
	}
</script>

<style lang="scss"
	scoped>
	.menu-scroll {
		display: flex;
		flex-direction: column;
		white-space: nowrap;
		width: 750rpx;
		padding-bottom: 20rpx;
		margin: 20rpx 0;


		.wt-item {
			display: inline-flex;
			justify-content: space-between;
			align-items: center;
			width: 692rpx;
			height: 210rpx;
			margin-bottom: 36rpx;
			padding: 0 30rpx;
			// &:first-of-type{
			// 	padding-left: 30rpx;
			// }
			// &:last-of-type{
			// 	padding-right: 20rpx;
			// }


			image {
				width: 314rpx;
				height: 210rpx;
				border-radius: $uni-border-radius-lg;
			}

			.right {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 350rpx;

				text {
					width: 100%;
					text-align: left;
					font-size: 30rpx;
					color: #bababa;

					&.menu-title {
						color: #4a4a4a;
						margin-bottom: 20rpx;
					}

					&.menu-desc {
						font-size: 24rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						margin-bottom: 68rpx;
					}
				}

				.item-row {
					width: 100%;
					display: flex;
					align-items: center;

					.row-item {
						// width: 334rpx;
						display: flex;
						align-items: center;
						margin-right: 60rpx;

						text {
							width: fit-content;
							font-size: 22rpx;
							color: #aaa;
							margin-right: 14rpx;
						}

						image {
							width: 24rpx;
							height: 24rpx;
						}
					}
				}
			}
		}




	}
</style>
